<template>

  <div>
    <div class="handle-box" style="margin: 20px 0">
      <el-input v-model="stockName" placeholder="商品名称" style="width: 200px;margin: 0 20px"></el-input>
      <el-input v-model="startNumber" placeholder="起始数量" style="width: 200px;margin-right: 20px"></el-input>
      <el-input v-model="endNumber" placeholder="结束数量" style="width: 200px;margin-right: 20px"></el-input>
      <el-select v-model="priceStatus" style="margin-right: 20px" placeholder="未定销售价">
        <el-option label="不限" value="0"></el-option>
        <el-option label="未定销售价" value="1"></el-option>
      </el-select>
      <el-select v-model="type"  style="margin-right: 20px" placeholder="电脑产品">
        <el-option label="电脑产品" value="1"></el-option>
        <el-option label="安防产品" value="2"></el-option>
        <el-option label="打印扫描设备" value="3"></el-option>
        <el-option label="办公耗材" value="4"></el-option>
      </el-select>
      <el-button type="primary" v-on:click="info()"><el-icon class="el-icon--left"><Search /></el-icon>查询</el-button>
    </div>

    <el-table :data="tableData" border stripe header-cell-class-name="table-header">
      <el-table-column prop="stockName" label="商品名称"></el-table-column>
      <el-table-column label="类别">
        <template #default="scope">
            {{this.typeTrans(scope.row.stockType)}}
        </template>
      </el-table-column>
      <el-table-column prop="stockBrand" label="品牌"></el-table-column>
      <el-table-column prop="stockNumber" label="库存数量"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button v-on:click="selectOne(scope.row.stockId)">
            查看
          </el-button>
          <el-button v-on:click="goUpdate(scope.row.stockId)">
            修改销售价
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--查看-->
    <el-dialog v-model="dialogVisibleDetails" title="商品信息详情" width="30%">
      <div>
        <div style="margin: 30px 0">
          <el-image :src="'http://localhost:8080/face/'+this.stockDetails.stockImg" style="width: 100px;height: 100px"></el-image>
        </div>
        <p style="margin: 30px 0"><span style="margin-right: 30px">商品编号</span>{{ this.stockDetails.code }}</p>
        <p style="margin: 30px 0"><span style="margin-right: 30px">商品名称</span>{{ this.stockDetails.stockName }}</p>
        <p style="margin: 30px 0"><span style="margin-right: 30px">品牌</span>{{ this.stockDetails.stockBrand }}</p>
        <p style="margin: 30px 0"><span style="margin-right: 30px">类别</span>{{ this.typeTrans(this.stockDetails.stockType) }}</p>
        <p style="margin: 30px 0"><span style="margin-right: 30px">库存数量</span>{{ this.stockDetails.stockNumber }}</p>
        <p style="margin: 30px 0"><span style="margin-right: 30px">最新采购价</span>{{ this.stockDetails.stockNewPrice }}</p>
        <p style="margin: 30px 0"><span style="margin-right: 30px">建议销售价</span>{{ this.stockDetails.stockSuggestPrice }}</p>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogVisibleDetails=false">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!--修改销售价-->
    <el-dialog v-model="dialogVisibleUpdate" title="修改商品销售价" width="30%">
      <el-form :model="updateForm" ref="updateForm">
        <el-form-item prop="stockImg"> <el-image :src="'http://localhost:8080/face/'+updateForm.stockImg" style="width: 100px;height: 100px"></el-image></el-form-item>
        <el-form-item prop="stockImg" label="商品编号">
          <p>{{updateForm.code}}</p>
        </el-form-item>
        <el-form-item prop="stockName" label="商品名称">
          <p>{{updateForm.stockName}}</p>
        </el-form-item>
        <el-form-item prop="stockBrand" label="品牌">
          <p>{{updateForm.stockBrand}}</p>
        </el-form-item>
        <el-form-item prop="stockType" label="类别">
          <p>{{ this.typeTrans(updateForm.stockType) }}</p>
        </el-form-item>
        <el-form-item prop="stockNumber" label="库存数量">
          <p>{{updateForm.stockNumber}}</p>
        </el-form-item>
        <el-form-item prop="stockNewPrice" label="最新采购价">
          <p>{{updateForm.stockNewPrice}}</p>
        </el-form-item>
        <el-form-item prop="stockSuggestPrice" label="建议销售价">
          <el-input v-model="updateForm.stockSuggestPrice"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="updatePrice()">修改</el-button>
        </span>
      </template>
    </el-dialog>

    <!--分页-->
    <el-pagination style="width:400px;margin: 30px auto" v-model:page-size="pageSize" v-model:current-page="curPage"
                   :total="total" background @current-change="info"></el-pagination>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "stock",
  created() {
    this.info()
  },
  data(){
    return{
      tableData:[],
      pageSize: 4,
      curPage: 1,
      total: 0,
      stockName:'',
      startNumber:'',
      endNumber:'',
      priceStatus:'',
      type:'',
      dialogVisibleDetails:false,
      stockDetails:{},
      dialogVisibleUpdate:false,
      updateForm:{},
    }
  },
  methods:{
    info(){
      let param = {
        "curPage": this.curPage,
        "pageSize": this.pageSize,
        "startNumber":this.startNumber,
        "endNumber":this.endNumber,
        "priceStatus":this.priceStatus,
        data: {"stockName":this.stockName,"stockType":this.type}
      }
      let config = {
        headers: {
          'Content-Type': 'application/json'
        }
      }
      axios.post('/api/stock/info', param, config).then(response => {
        this.tableData = response.data.records
        this.total = response.data.total
      })
    },
    typeTrans(type){
      if (type==1){
        return '电脑产品'
      }else if (type==2){
        return '安防产品'
      }else if (type==3){
        return '打印扫描设备'
      }else if (type==4){
        return '办公耗材'
      }
    },
    selectOne(id){
      this.dialogVisibleDetails = true;
      let param = new URLSearchParams();
      param.append("id",id)
      axios.post('/api/stock/queryOne',param).then(response=>{
        this.stockDetails = response.data
      })
    },
    goUpdate(id){
      this.dialogVisibleUpdate = true;
      let param = new URLSearchParams();
      param.append("id",id)
      axios.post('/api/stock/queryOne',param).then(response=>{
        this.updateForm = response.data
      })
    },
    updatePrice(){
      axios.post('/api/stock/updatePrice',this.updateForm).then(response=>{
        if ("修改成功"==response.data){
          ElMessage.success('修改成功');
          this.$refs["updateForm"].resetFields();
          this.dialogVisibleUpdate = false;
          this.info()
        }else {
          ElMessage.error('修改失败');
        }
      })
    }
  }
}
</script>

<style scoped>

</style>